<html>  
  <head>  
        <meta charset="utf-8">  
        <title>5.3.2 刻度</title>  
  </head>
<style>
.axis path,
.axis line{
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
}
 
.axis text {
	font-family: sans-serif;
	font-size: 11px;
}
</style>
<body>

<script src="../../d3/d3.min.js" charset="utf-8"></script> 
<script>  

var width = 600;
var height = 600;

var svg = d3.select("body").append("svg")
				.attr("width",width)
				.attr("height",height);

var scale = d3.scale.linear()
				.domain([0,10])
				.range([0,150]);
	
var axisLeft = d3.svg.axis()
				.scale(scale)
				.orient("left")
				.ticks(5);
				
var axisRight = d3.svg.axis()
				.scale(scale)
				.orient("right")
				.tickValues([3,4,5,6,7]);
				
var gAxisLeft = svg.append("g")
			.attr("transform","translate(80,80)")
			.attr("class","axis")
			.call(axisLeft);
			
var gAxisRight = svg.append("g")
			.attr("transform","translate(100,80)")
			.attr("class","axis")
			.call(axisRight);

			
var axisTop = d3.svg.axis()
				.scale(scale)
				.orient("top")
				.ticks(5)
				.tickSize(2,4);
				
var gAxisTop = svg.append("g")
			.attr("transform","translate(80,30)")
			.attr("class","axis")
			.call(axisTop);

scale.range([0,300]);
			
var axisBottom = d3.svg.axis()
				.scale(scale)
				.orient("bottom")
				.ticks(5)
				.tickFormat(d3.format("$0.1f"));
				
var gAxisBottom = svg.append("g")
			.attr("transform","translate(80,300)")
			.attr("class","axis")
			.call(axisBottom);
			
	
</script> 

</body>

</html>